<!--每周重点-->
<template>
  <section class="week-focus" :style="{ 'margin-top': top,'padding-left': margins, 'padding-right': margins}">
    <!-- <section class="moduleName-box">
      <span class="moduleName">{{ option.moduleName }}</span>
    </section> -->
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :hide-desc="option.isMore === '2'"
      :option="option"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <section
      class="card2-container"
      :style="{ 'border-radius':(isShowModuleName || option.isMore === '1') ?
        '0 0 ' + radiusSize+ ' ' + radiusSize:''}"
    >
      <section class="jrgx-container">
        <template v-if="capsuleFigure && capsuleFigure.length>0">
          <van-swipe ref="swiper" class="jrgx-special" :autoplay="5000" :duration="1000" indicator-color="white" :stop-propagation="false">
            <van-swipe-item v-for="(item, i) in capsuleFigure" :key="i">
              <!-- @click="picJump(item)" -->
              <van-image :src="item.pic">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </template>
        <template v-if="keyContent&& keyContent.length>0">
          <van-swipe ref="swiper" class="img-entry" :autoplay="5000" :duration="1000" indicator-color="white" :stop-propagation="false">
            <van-swipe-item v-for="(item, i) in keyContent" :key="i">
              <!-- @click="picJump(item)" -->
              <van-image :src="item.pic">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png" alt>
                </template>
              </van-image>
            </van-swipe-item>
          </van-swipe>
        </template>
        <section class="bottom-box">
          <section class="bottom-left">
            <!-- @click="goDetail('learn')" -->
            <p class="p1 ysbt-front">{{ weekConfig[0]&&weekConfig[0].title || '每日云听' }}</p>
            <p class="p2">时间碎片学知识</p>
            <img class="" src="../../images/base/edit.png">
          </section>
          <section class="bottom-rigth">
            <section class="item-gj" :class="{ 'notImage':!dailyCraftsman.subjectId}">

              <van-image
                v-if="dailyCraftsman.coverURL"
                class="img-characters"
                :src="setImgPath(dailyCraftsman.cover, dailyCraftsman.coverURL)"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>
                  <img src="../../images/base/error-icon.png">
                </template>
              </van-image>
              <img v-else class="defaultImage" src="../../images/base/mrgj.png">

              <p class="p1">
                <span class="title-left ysbt-front">{{ weekConfig[1]&& weekConfig[1].title|| '今日匠星' }}</span>
                <span class="title-name etc">{{ dailyCraftsman.subjectId &&`${dailyCraftsman.subjectName&&dailyCraftsman.subjectName.length>3?dailyCraftsman.subjectName.substr(0,3)+'..':dailyCraftsman.subjectName}` }}</span>
              </p>
              <p class="p2 etc">{{ dailyCraftsman.subjectId ? dailyCraftsman.slogan : '敬请期待...' }}</p>
              <img src="../../images/base/icon.png" alt="" class="icon">

            </section>
            <section class="item-pdf">
              <!-- @click="goDetail('pdf')" -->
              <section>
                <p class="p1 ysbt-front">{{ weekConfig[2]&& weekConfig[2].title || '工具资源包' }}</p>
                <p class="p2">海量资源分享</p>
              </section>
              <img src="../../images/base/pdf.png" alt="" class="pdf">
              <img src="../../images/base/icon.png" alt="" class="icon">
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
</template>
<script>
import mixins from './../mixins'
import mixin from './mixins'
import { Toast } from 'vant'
import url from './api'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'
import { getConfig } from '@/views/config/pagestyle/api'
import request from '@/utils/request'
export default {
  name: 'WeekFocus',
  components: { CellTitle },
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      swiper: null,
      list: [],
      capsuleFigure: [
        {
          pic: '',
          sort: '1',
          type: '1',
          url: ''
        }
      ],
      keyContent: [
        {
          pic: '',
          sort: '1',
          type: '1',
          url: ''
        }
      ],
      weekConfig: [
        {
          mryt: 'Z1255695424096497666',
          title: '每日云听 ',
          toUrl: '/broadcast/mryt?viewType=everydaylistening&'
        },
        {
          mryt: '8bc76f15-5c0d-45bf-a55b-f6497daa8e3a',
          title: '今日匠星 ',
          toUrl: '/craftsman/detai'
        },
        {
          mryt: '725cef58-df90-4e70-9389-e87ab4474750',
          title: '资源工具包 ',
          toUrl: '/weekfocusList?f=3&t=资源工具包&viewType=toolresource'
        }
      ],
      dailyCraftsman: {},
      audioInfo: {}
    }
  },
  computed: {
    showViewCounter() {
      return this.option.showViewCounter
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    setData(result) {
      this.capsuleFigure = this.getConfig(result?.capsuleFigure.data ? result?.capsuleFigure.data : [])
      this.keyContent = this.getConfig(result?.keyContent.data ? result?.keyContent.data : [])
      this.weekConfig = this.getConfig(result?.weekConfig.data ? result?.weekConfig.data : [])
      this.dailyCraftsman = result?.dailyCraftsman.data ? result?.dailyCraftsman.data : {}
      this.audioInfo = result?.audioInfo.data ? result?.audioInfo.data : ''
    },
    getConfig(val) {
      try {
        return JSON.parse(val?.configValue)
      } catch (e) {
        return []
      }
    },
    /*
   * 跳转 type:1内部链接 2外部链接
   * */
    picJump(item) {
      if (item.type === '1') {
        this.$router.push(item.url)
      } else if (item.type === '2') {
        location.href = item.url
      }
    },
    /*
     * 跳转 type:1内部链接 2外部链接
     * */
    goDetail(type) {
      if (type === 'learn' && this.weekConfig[0].toUrl) {
        this.$axios.post(url.getListeningToday).then(res => {
          if (res.code === '200' && res.data) {
            this.$router.push(`${this.weekConfig[0].toUrl}i=${res.data}`)
          } else {
            Toast('敬请期待...')
          }
        }).catch(err => {
          console.log(err)
        })
        // this.$router.push(`${this.weekConfig[0].toUrl}`)
      } else if (type === 'gj' && this.weekConfig[1].toUrl) {
        if (this.dailyCraftsman.subjectId) {
          this.$router.push(`/craftsman/detail?i=${this.dailyCraftsman.subjectId}`)
        } else {
          Toast('敬请期待...')
        }
      } else if (type === 'pdf' && this.weekConfig[2].toUrl) {
        this.$router.push(this.weekConfig[2].toUrl)
      } else {
        Toast('功能建设中！')
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';
.week-focus {
  margin: 0 auto;
  position: relative;
  width: rem(750);
  padding:rem(12) 0;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .moduleName-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: rem(24);
    padding: 0 rem(23);
    .moduleName{
      color:#222;
      font-weight: bold;
      font-size: rem(32);
    }
    .more{
      color:#999999;
      font-size:rem(24);
    }
  }
  .card2-container{

    p{
      margin: 0;
      padding: 0;
    }
    background-color: #fff;
    padding: rem(24);
    border-radius: rem(16);
    .jrgx-container {
      position: relative;
      .jrgx-special {
        width: 100%;
        height: rem(120);
        .van-image {
          width: 100%;
          height: 100%;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
          .van-image__error {
            > img {
              width: rem(80);
              height: rem(80);
            }

          }
        }

      }
      .img-entry {
        width: 100%;
        height: rem(290);
        margin-top: rem(20);
        border-radius: rem(20);
        .van-image {
          width: 100%;
          height: 100%;
          img{
            width: 100%;
            height: 100%;
            display: block;
          }
          .van-image__error {
            > img {
              width: rem(120);
              height: rem(120);
            }

          }
        }

      }
    }
    .bottom-box {
      display: flex;
      margin-top: rem(20);
      .bottom-left {
        width: rem(240);
        height: rem(228);
        display: flex;
        margin-right: rem(20);
        justify-content: center;
        flex-direction: column;
        align-items: center;
        background: url("../../images/base/zbg.png") no-repeat 100% 100%;
        border-radius: rem(12);
        .p1 {
          font-size: rem(32);
          color: #f17f4d;
          text-align: center;
          margin-bottom: rem(8);
        }
        .p2 {
          font-size: rem(22);
          text-align: center;
          color: #ef5537;
          margin-bottom: rem(10);
        }
        img {
          width: rem(72);
          height: rem(72);
        }
      }
      .bottom-rigth {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex:1;
        .item-gj {
          height: rem(104);
          position: relative;
          width: 100%;
          padding: rem(15) 0 rem(15) rem(10);
          &:after {
            content: "";
            position: absolute;
            left: 0;
            right: rem(185);
            top: 0;
            bottom: 0;
            width: rem(350);
            background: url("../../images/base/mrgj-bg.png") no-repeat;
            background-size: 100% 100%;
            // background-size: 100% 100%;
            z-index: 1;
            overflow: hidden;
          }
          &.notImage:after{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            width: rem(350);
            bottom: 0;
            background: url("../../images/base/mrgj-bg.png") no-repeat;
            background-size: 100% 100%;
            z-index: 1;
            overflow: hidden;
          }
          .img-characters {
            max-width: rem(185);
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: rem(104);
            z-index: 99;
            /deep/ .van-image__img {
              margin: 0;
              padding: 0;
              height: 100%;
              width: auto;
            }
          }

          .icon {
            z-index: 2;
            position: absolute;
            width: rem(50);
            height: rem(22);
            top: 0;
            right: 0;
          }

          .defaultImage{
            width: rem(55);
            height:rem(62);
            position: absolute;
            right: rem(38);
            top:rem(20);
            z-index: 2;
          }
          .p1 {
            display: flex;
            align-items: flex-end;
            margin-bottom: rem(10);
            .title-left {
              position: relative;
              z-index: 2;
              font-size: rem(32);
              text-align: center;
              color: #6130ef;
              margin-right: rem(2);
              line-height: 1;
            }
            .title-name {
              z-index: 2;
              font-size: rem(22);
              font-weight: bold;
              color: #333333;
              position: relative;
              width: rem(140);
            }
          }

          .p2 {
            z-index: 2;
            font-size: rem(22);
            width: rem(300);
            color: #7549f4;
            position: relative;
          }

        }

        .mrgj-bg{
          height: rem(104);
          width: 100%;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .item-pdf {
          height: rem(104);
          display: flex;
          background:url('../../images/base/fbg.png') no-repeat 100% 100%;
          position:relative;
          padding: rem(15)  rem(10);
          .p1 {
            font-size: rem(32);
            color: #1e76e0;
            margin-bottom: rem(10);
            line-height: 1;
          }
          .p2 {
            font-size: rem(22);
            color: #3e8be4;
          }
          .icon {
            z-index: 2;
            position: absolute;
            width: rem(50);
            height: rem(22);
            top: 0;
            right: 0;
          }
          .pdf{
            width: rem(55);
            height:rem(62);
            position:Absolute;
            right: rem(38);
            top:rem(20);
          }
        }
      }
    }
  }
}

</style>
